<template>
	<div class="bottom">
		<div class="top">
			<div class="each">
				<div class="content">
					<div style="display: flex;margin-bottom: 10rem;">105<span style="margin-left: 5rem;">Mpa</span></div>
					<div>进口压力</div>
				</div>
			</div>
			<div class="each">
				<div class="content">
					<div style="display: flex;margin-bottom: 10rem;">109<span style="margin-left: 5rem;">Mpa</span></div>
					<div>出口压力</div>
				</div>
			</div>
			<div class="each col" style="height: 100%;">
				<dv-decoration-9 style="width:170rem;height:170rem;margin: auto;">
					<span style="font-family: DIN1451;color: aquamarine;font-size: 20rem;">{{num+'%'}}</span>
				</dv-decoration-9>
				<span> 机组负荷率</span>
			</div>
			<div class="each">
				<div class="content">
					<div style="display: flex;margin-bottom: 10rem;">05:18:23</div>
					<div>本次运行时间</div>
				</div>
			</div>
			<div class="each">
				<div class="content">
					<div style="display: flex;margin-bottom: 10rem;">7056</div>
					<div>耗电或耗汽量</div>
				</div>
			</div>
		</div>
		<div class="btm">
			<div class="ec">
				<dv-decoration-5 style="width:300rem;height:40rem;" />
				转速:8059 RPM
			</div>
			<div class="ec">
				<dv-decoration-5 style="width:300rem;height:40rem;" />功率:7029 KWH</div>
			<div class="ec">
				<dv-decoration-5 style="width:300rem;height:40rem;" />测点名称：测试名称</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'bottom',
		data() {
			return {
				num: 0
			}
		},
		created() {
			window.setInterval(() => {
				this.num > 98 ? this.num = 0 : this.num += 2
			}, 50)
		}
	}
</script>
<style lang='scss'>
	.bottom {
		height: 92%;
		width: 97%;
		margin: 12rem auto;

		.top {
			width: 85%;
			margin: 10rem auto;
			height: 190rem;
			background: url(../../../assets/num-bg.png);
			display: flex;
			justify-content: space-between;

			.each {
				display: flex;
				width: 16%;
				height: 100rem;


				.content {
					font-family: DIN1451;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: white;
				}
			}

			.col {
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				span {
					color: white;
					font-weight: bold;
					margin-top: 5rem;
				}
			}
		}

		.btm {
			height: 85rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: white;
			font-weight: bold;
		}
	}
</style>
